<template>
  <div class="select-property">
    <a-modal
      title="选择收费标准"
      :visible="visible"
      :footer="null"
      centered
      @cancel="onClose"
      :width="1200"
    >
      <a-row >
        <a-col :span="24" style="margin-bottom: 20px;">
          <a-form layout="vertical">
              <a-space :size="25">
                <a-form-item label="所属项目">
                    <a-select
                      v-model:value="villageId"
                      :options="villageList"
                      style="width: 220px"
                      @change="villageIdChange"
                    />
                </a-form-item>
                <a-form-item label="标准名称">
                  <a-input-search
                    v-model:value="name"
                    placeholder="请输入标准名称搜索"
                    style="width: 220px"
                    @search="onSearch"
                    allowClear
                  />
                </a-form-item>
              </a-space>
             </a-form>
        </a-col>
        <a-col :span="24">
          <!-- 表格 -->
          <a-table
            :scroll="{ y: 490 }"
            :columns="columns"
            :dataSource="dataList"
            :pagination="pagination"
            @change="handleTableChange"
            :loading="tableLoading"
            rowKey="id"
            :customRow="customRow"
          >
            <template #bodyCell="{ text, record, index, column }">
              <template v-if="column.key === 'status'">
                <a-tag :color="record.status == 1 ? '#87d068' : '#f50'">{{
                  record.status == 1 ? "生效中" : "已失效"
                }}</a-tag>
              </template>
              <template v-if="column.key === 'expire_time'">
                <span v-if="!record.remainngTime">{{
                  record.expire_time
                }}</span>
                <a-tooltip color="orange" placement="right" v-else>
                  <template #title>
                    距离失效还有{{ record.remainngTime }}小时
                  </template>
                  <span style="color: #faad14">{{ record.expire_time }}</span>
                </a-tooltip>
              </template>
              <template v-if="column.key === 'unit_price'">
                {{ record.unit_price }}
                <a-tag v-if="record.unitText" :bordered="false" color="green"
                  >x {{ record.unitText }}</a-tag
                >
              </template>
              <template v-if="column.key === 'action'">
                <a-button type="link" @click="onSubmit(record)">使用</a-button>
              </template>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, toRefs, toRaw, watch } from "vue";
import { message } from "ant-design-vue";
import request from "../../../../common/utils/request";
export default defineComponent({
  name: "SelectChargeStandard",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    appendParams: {
      type: Object,
      default: () => ({}),
    }
  },
  setup(props, context) {
    const state = reactive({
      dataList: [],
      page: 1,
      pageSize: 20,
      total: 0,
      tableLoading: false,
      villageId: undefined,
      villageList: [],
      name:''
    });

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
    }));

    const handleTableChange = (pager, filters, sorter) => {
      console.log("handleTableChange", filters, sorter);
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getDataList();
    };
    const columns = computed(() => {
      return [
        {
          title: "标准名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "计费模式",
          dataIndex: "modeText",
          key: "modeText",
        },
        {
          title: "单价",
          dataIndex: "unit_price",
          key: "unit_price",
        },
        {
          title: "生效时间",
          dataIndex: "valid_time",
          key: "valid_time",
        },
        {
          title: "失效时间",
          dataIndex: "expire_time",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
        },
        {
          title: "所属项目",
          dataIndex: "village_name",
          key: "village_name",
        },
        {
          title: "创建时间",
          dataIndex: "created_at",
          key: "created_at",
          width: 160,
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
        },
      ];
    });

    const getDataList = (keywords, searchInfo) => {
      state.tableLoading = true;
      let params = {
        ...props.appendParams,
        page: state.page,
        pageSize: state.pageSize,
      };
      if(state.villageId) {
        params.village_id = state.villageId
      }
      if(state.name) {
        params.name = state.name
      }
      request
        .get("/org", "/standard/list", {
          ...params,
        })
        .then((res) => {
          state.dataList = res.result.data;
          state.total = res.result.total;
        })
        .finally(() => {
          state.tableLoading = false;
        });
    };

    const defaultPagination = () => {
      state.page = 1
      state.pageSize = 20
    }


    const getVillageList=()=>{
        request.get('/org','/build/villageAndBuildList',{checked:1}).then((res)=>{
          state.villageList = res.villageList.map((item)=>{
            return {
              label: item.name,
              value: item.id
            }
          })
          state.villageId = Number(props.appendParams?.village_id)
        })
    }

    const villageIdChange= () =>{
      defaultPagination()
      getDataList()
    }

    const onSearch = (value)=>{
      defaultPagination()
      getDataList()
    }

    const init = () => {
      state.dataList = [];
      getDataList()
      getVillageList()
    };

    const onClose = () => {
      context.emit("close");
    };

    const onSubmit = (record) => {
      context.emit("success", record);
    };

    const customRow = (record) => {
      return {
        style: {
          cursor: "pointer",
        },
        onClick: () => {
          context.emit("success", record);
        },
      };
    };



    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        }
      }
    );
    return {
      ...toRefs(state),
      columns,
      pagination,
      handleTableChange,
      onClose,
      onSubmit,
      customRow,
      villageIdChange,
      onSearch
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-form-item) {
  margin-bottom: 0;
}

:deep(.ant-table-title) {
  padding: 0;
  background-color: #f8f8f9;
  border-bottom: 1px solid #e8eaec;
  margin-bottom: 1px;
  margin-top: 20px;
}

:deep(.ant-table-title) {
  margin-top: 0px;
}
</style>
